<!--
 * @Date: 2024-07-11 14:49:26
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-07-19 15:18:11
 * @FilePath: \reslib-web\src\views\knowledge\eventGraph\graph.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
  <div class="container graph">
    <div id="canvas" class="canvas-reduce"></div>
    <div @click="handleFullScreen()" class="c-full-screen">
      <el-icon>
        <FullScreen />
      </el-icon>
      <!-- <el-icon v-show="fullScreenSwitch">
        <FullScreen />
      </el-icon>
      <el-icon v-show="!fullScreenSwitch">
        <Minus />
      </el-icon> -->
    </div>
    <div class="c-right-bottom">
      <div class="b-switch-box">
        <el-switch @change="changeSwitch()" v-model="switchObject[0]" style="--el-switch-on-color: #039595;" />
        <div class="s-b-table">人物</div>
      </div>
      <div class=" b-switch-box">
        <el-switch @change="changeSwitch()" v-model="switchObject[1]" style="--el-switch-on-color: #039595;" />
        <div class="s-b-table">事件</div>
      </div>
      <div class="b-switch-box">
        <el-switch @change="changeSwitch()" v-model="switchObject[2]" style="--el-switch-on-color: #039595;" />
        <div class="s-b-table">机构</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import echarts from '@/plugins/echarts'
import { GraphChart, SunburstChart } from 'echarts/charts'

const props = defineProps({
  ckmData: Object,
  detailsData: Object
})
echarts.use([GraphChart])
echarts.use([SunburstChart])
const emit = defineEmits(['leftClickOnNode'])
const switchObject = reactive<Object>([true, true, true])
const changeSwitch = () => {
  console.log(switchObject)
}
const exp = reactive({
  pathUrl: import.meta.env.VITE_URL
})
const optionsSegmented = []
const fullScreenSwitch = ref(true)

onMounted(async () => {
  await dealWithData()
  draw()
})

const handleFullScreen = async () => {
  var myChart = echarts.init(document.getElementById('canvas'))
  const container1 = window.document.querySelector('.container')
  // if (!fullScreenSwitch.value) {
  //   document.exitFullscreen()
  //   var width = document.getElementById("canvas").offsetWidth
  //   var height = document.getElementById("canvas").offsetHeight
  //   console.log(width)
  //   console.log(height)
  //   if (height !== 720) {
  //     myChart.clear()
  //     myChart.dispose()
  //   }
  //   // await dealWithData()
  //   // draw()
  //   myChart.resize()
  // }
  const container = window.document.querySelector('#canvas div')
  const container2 = window.document.querySelector('#canvas div canvas')
  container1.requestFullscreen()
  // container.requestFullscreen()
  container.style.width = '100%'
  container.style.height = '100%'
  // container2.requestFullscreen()
  // container2.width = '100%'
  // container2.height = '100%'
  // container2.style.width = '100%'
  // container2.style.height = '100%'
  // container.requestFullscreen()
  // alert(window.outerWidth)
  // console.log(window.outerWidth)
  // console.log(window.outerHeight)
  // container.className = 'canvas-full-screen'
  // container.style.display = 'flex'
  // container.style.ZIndex = '1000'
  // container.width = window.outerWidth
  // container.height = window.outerHeight
  // container.style.width = '100%'
  await dealWithData()
  draw()
  fullScreenSwitch.value = !fullScreenSwitch.value
}
// 实体数据
var datas = []
// 关系数据
var linkmes = []
// 裁剪圆形图片
const getImg = (imgSrc) => {
  var fun = function (resolve) {
    const can = document.createElement('canvas')
    const context = can.getContext('2d')
    const img = new Image()
    img.crossOrigin = ''
    img.onload = function () {
      let center = {
        x: img.width / 2,
        y: img.height / 2
      }
      var diameter = img.height > img.width ? img.width : img.height
      can.width = diameter
      can.height = diameter
      context?.clearRect(0, 0, diameter, diameter)
      context?.save()
      context?.beginPath()
      let radius = img.height > img.width ? img.width / 2 : img.height / 2
      context?.arc(radius, radius, radius, 0, 2 * Math.PI)
      context?.clip()
      context?.drawImage(
        img,
        center.x - radius,
        center.y - radius,
        diameter,
        diameter,
        0,
        0,
        diameter,
        diameter
      )
      context?.restore()
      resolve(can.toDataURL('image/png', 1))
    }
    img.src = imgSrc
  }
  var promise = new Promise(fun)
  return promise
}
// ckm数据
var testData = reactive<any[]>([])
const initCkmData = () => {
  props.ckmData.forEach((item, index) => {
    testData.push({
      entity: item.endEntity,
      // entity: '终止节点' + index,
      entityImg: item.asdf.entityPhotoUrl,
      // entityImg: 'http://192.168.8.190/images/defaultCharacterImage1.png',
      feature: item.startEntity,
      // feature: '起始节点',
      // featureImg: 'http://192.168.8.190/images/defaultCharacterImage1.png',
      featureImg:
        // props.detailsData.entityPhotoUrl || exp.pathUrl + '/images/defaultCharacterImage2.jpg',
        props.detailsData.entityPhotoUrl,
      rela: item.relation,
      sen: '1935年10月红一方面军到达陕北，11月中共中央在陕北成立中国工农红军西北革命军事委员会，下设政治保卫局，局长罗瑞卿。',
      idSen: 19123,
      entityType: 'org',
      featureType: 'n',
      value: 1,
      posEntity: 1608,
      posFeature: 1624,
      posRela: 19
    })
  })
  // testData.push({
  //   entity: '二级节点',
  //   entityImg: 'http://192.168.8.190/images/defaultCharacterImage1.png',
  //   feature: '毛泽东',
  //   // featureImg: 'http://192.168.8.190/images/defaultCharacterImage1.png',
  //   featureImg:
  //     // props.detailsData.entityPhotoUrl || exp.pathUrl + '/images/defaultCharacterImage2.jpg',
  //     'http://192.168.8.190/images/defaultCharacterImage1.png',
  //   rela: '测试',
  //   sen: '1935年10月红一方面军到达陕北，11月中共中央在陕北成立中国工农红军西北革命军事委员会，下设政治保卫局，局长罗瑞卿。',
  //   idSen: 19,
  //   entityType: 'org',
  //   featureType: 'n',
  //   value: 1,
  //   posEntity: 1608,
  //   posFeature: 1624,
  //   posRela: 19
  // })

}
initCkmData()
// 处理ckm数据
console.log(testData)
// 图谱接口返回数据testData备份
const testDataInitial = []
Object.assign(testDataInitial, testData)
// 右键单击关系分组
const resultKeys = reactive([])
const relationshipGroupingFcn = () => {
  // Object.keys(resultKeys).forEach((key) => (resultKeys[key] = ''))
  // 定义初始值为空对象{}
  var result = {}
  testData.forEach((item) => {
    const key = item.rela
    if (!result[key]) {
      // 若结果对象中不存在该键名，则创建新的数组并赋值给该键名
      result[key] = []
    }
    // 将当前元素添加到相应的数组中
    result[key].push(item)
    // result[key].push('全部')
  })
  // Object.values(resultKeys).map((item) => (item = ''))
  Object.assign(resultKeys, Object.keys(result))
  // console.log(resultKeys)
  // console.log(resultKeys.includes("全部"))
  if (!resultKeys.includes('全部')) {
    resultKeys[resultKeys.length] = '全部'
  }
  // if (resultKeys.length === 5) for (let i = 0; i < resultKeys.length; i++) if (resultKeys[i] === '') resultKeys[i] = '全部'
  // if (resultKeys.length !== 5) for (let i = resultKeys.length; i < 5; i++)  resultKeys[i] = '全部'
  Object.assign(optionsSegmented, Object.values(resultKeys))
  // optionsSegmented = Object.values(resultKeys)
}
relationshipGroupingFcn()
const dealWithData = async () => {
  datas = []
  linkmes = []
  let entityArr = []
  let symbol = ''
  for (let i = 0; i < testData.length; i++) {
    if (!entityArr.includes(testData[i].entity)) {
      if (testData[i].entityImg && testData[i].entityImg != '') {
        await getImg(testData[i].entityImg).then((res) => {
          symbol = 'image://' + res
        })
      } else {
        symbol = ''
      }
      datas.push({
        name: testData[i].entity,
        symbolSize: 100,
        // category: 1,
        symbol: symbol,
        label: {
          position: 'bottom',
          offset: [0, 5],
          fontSize: 14
        }
      })
      entityArr.push(testData[i].entity)
    }
    if (!entityArr.includes(testData[i].feature)) {
      if (testData[i].featureImg && testData[i].featureImg != '') {
        await getImg(testData[i].featureImg).then((res) => {
          symbol = 'image://' + res
        })
      } else {
        symbol = ''
      }
      datas.push({
        name: testData[i].feature,
        symbolSize: 100,
        // category: 1,
        symbol: symbol,
        // symbol: '@/assets/imgs/logo.png',
        label: {
          position: 'bottom',
          offset: [0, 5],
          fontSize: 14
        }
      })
      entityArr.push(testData[i].feature)
    }
    linkmes.push({
      source: testData[i].entity,
      target: testData[i].feature,
      label: {
        show: true,
        formatter: testData[i].rela,
        align: 'center',
        verticalAlign: 'middle',
        color: '#000000',
        fontSize: 14,
        fontWight: 'bold',
        backgroundColor: '#8cc6ff',
        padding: [5, 10],
        borderRadius: 10
      },
      lineStyle: {
        color: '#5f8ee7',
        opacity: 1,
        width: 2
      }
    })
  }
}
let option = {}
const draw = () => {
  var myChart = echarts.init(document.getElementById('canvas'))
  document.getElementById('canvas').oncontextmenu = function () {
    return false
  }
  option = {
    color: ['#83e0ff', '#45f5ce', '#b158ff'],
    // grid: {
    //   left: '300%',
    //   right: '4%',
    //   bottom: '3%',
    //   containLabel: true
    // },
    series: [
      {
        type: 'graph',
        zlevel: 10,
        layout: 'force',
        force: {
          repulsion: 800, // 排斥力
          gravity: 0.05,
          edgeLength: [100, 300],
          friction: 0.8,
          layoutAnimation: true
        },
        draggable: true,
        roam: true,
        nodeScaleRatio: 0,
        zoom: 1.4,
        // center: [5.97, 9.71],
        scaleLimit: { min: 0.8, max: 1.3 }, // 比例限制
        label: {
          normal: { show: true }
        },
        itemStyle: {
          normal: {
            borderColor: '#ffffff',
            borderWidth: 5,
            shadowBlur: 20,
            shadowColor: '#ffffff',
            color: '#001c43'
          }
        },
        data: datas,
        links: linkmes,
        lineStyle: {
          normal: {
            opacity: 0.9,
            width: 5,
            curveness: 0
          }
        },
        categories: [{ name: '0' }, { name: '1' }, { name: '2' }],
        selectedMode: 'single',
        select: {
          label: {
            backgroundColor: 'blue'
          },
          disabled: true
        }
      }
    ]
  }
  myChart.setOption(option)
  window.onresize = async (event) => {
    var width = document.getElementById("canvas").offsetWidth
    var height = document.getElementById("canvas").offsetHeight
    console.log(width)
    console.log(height)
    if (height !== 720) {
      myChart.clear()
      myChart.dispose()
    }
    // await dealWithData()
    // draw()
    myChart.resize()
  }
  // 缩放至最大最小标识
  let zoomFlag = false
  // canvas视角中心
  let center = [0, 0]
  let centerFlag = false
  let centerNow = [0, 0]
  let centerReal = [0, 0]
  let flag = false
  // 缩放至最大最小后，鼠标滚动视角中心偏移量
  let centerChange = [0, 0]
  // myChart.getDom().children[0].children[0].addEventListener('wheel', function (event) {
  //     // debugger
  //     event.preventDefault()
  //     // console.log(myChart.getOption().series[0].center)
  //     zoomFlag = myChart.getOption().series[0].zoom == 0.8 || myChart.getOption().series[0].zoom == 1.5 ? true : false

  //     if(zoomFlag && center[0] == 0 && center[1] == 0){
  //         if(centerChange[0] != 0 && centerChange[1] != 0){
  //             center = [myChart.getOption().series[0].center[0] - centerChange[0], myChart.getOption().series[0].center[1] - centerChange[1]]
  //         }else{
  //             if(!centerFlag){
  //                 center = myChart.getOption().series[0].center
  //                 centerFlag = true
  //             }else{
  //                 center = [myChart.getOption().series[0].center[0] - centerChange[0], myChart.getOption().series[0].center[1] - centerChange[1]]
  //             }
  //         }
  //         // console.log(center,99999)
  //     }
  //     // if(!zoomFlag){
  //     //     if(center[0] != 0 || center[1] != 0){
  //     //         var centerTemp = myChart.getOption().series[0].center
  //     //         centerChange = [centerTemp[0] - center[0], centerTemp[1] - center[1]]
  //     //     }
  //     //     // center = [0,0]
  //     //     centerReal = []
  //     // }

  //     setTimeout(() => {
  //         if(zoomFlag && (center[0] != 0 || center[1] != 0)){

  //             var centerTemp = myChart.getOption().series[0].center
  //             centerNow = myChart.getOption().series[0].center
  //             centerChange = [centerTemp[0] - center[0], centerTemp[1] - center[1]]
  //             // console.log(centerChange,988888)
  //         }
  //         // if(!zoomFlag && (center[0] != 0 || center[1] != 0)){
  //         //     centerChange = [centerNow[0] - myChart.getOption().series[0].center[0], centerNow[1] - myChart.getOption().series[0].center[1]]
  //         // }

  //         // console.log(center, myChart.getOption().series[0].zoom, myChart.getOption().series[0].center)
  //         console.log(myChart.getOption().series[0].zoom)
  //         console.log('中心点：',center)
  //         console.log('实际中心点：', myChart.getOption().series[0].center)
  //         console.log('偏离值：', centerChange)
  //         console.log(`\n`)
  //     }, 100);

  // });

  // myChart.on('mouseup',(params)=>{
  //     if(center[0] != 0 || center[1] != 0){
  //         var centerTemp = myChart.getOption().series[0].center
  //         centerChange = [centerTemp[0] - center[0], centerTemp[1] - center[1]]
  //     }
  //     console.log(999)
  // })

  // 右击节点，展开菜单
  myChart.on('contextmenu', (params) => {
    // 根据点击节点获取数据，修改菜单圆心样式
    menuStyle.value = {
      background: params.event?.target.style.fill,
      border: `${params.event?.target.style.lineWidth}px solid ${params.event?.target.style.stroke}`,
      'box-shadow': `0px 0px ${params.event?.target.style.shadowBlur}px ${params.event?.target.style.shadowColor}`,
      width: params.data.symbolSize - 20 + 'px',
      height: params.data.symbolSize + 'px',
      top: `calc(50% - ${(params.data.symbolSize + params.event?.target.style.lineWidth) / 2}px)`,
      left: `calc(50% - ${(params.data.symbolSize + params.event?.target.style.lineWidth) / 2}px)`,
      'line-height': params.data.symbolSize + 'px'
    }
    // 选中节点名称
    selectItem.value = params.data.name
    // 选中节点图片
    selectItemImg.value = params.data.symbol ? params.data.symbol.replace('image://', '') : ''
    // 选中节点图片样式
    selectItemImgStyle.value = {
      width: params.data.symbolSize + 'px',
      height: params.data.symbolSize + 'px'
    }

    // 重绘图谱
    // setTimeout(() => {
    option.series[0].draggable = false
    option.series[0].roam = false
    option.series[0].force.layoutAnimation = false
    option.series[0].zoom = myChart.getOption().series[0].zoom
    // option.series[0].center =  myChart.getOption().series[0].center
    // console.log(myChart.getOption().series[0].center,111)
    // option.series[0].center = center[0] != 0 || center[1] != 0 ? [myChart.getOption().series[0].center[0] - centerChange[0], myChart.getOption().series[0].center[1] - centerChange[1]] : myChart.getOption().series[0].center
    // centerChange = [centerNow[0] - myChart.getOption().series[0].center[0] + centerChange[0], centerNow[1] - myChart.getOption().series[0].center[1] + centerChange[1]]
    // option.series[0].center = [myChart.getOption().series[0].center[0] - centerChange[0], myChart.getOption().series[0].center[1] - centerChange[1]]
    // option.series[0].center = [center[0] - (centerNow[0] - myChart.getOption().series[0].center[0]), center[1] - (centerNow[1] - myChart.getOption().series[0].center[1])]
    // console.log(myChart.getOption().series[0].zoom)
    // console.log('中心点：', center)
    // console.log('实际中心点：', myChart.getOption().series[0].center)
    // console.log('偏离值：', centerChange)
    // console.log('值：',option.series[0].center)
    myChart.setOption(option, false)
    // center = [0, 0]
    // zoomFlag = false
    // centerFlag = false
    // centerChange = [0, 0]
    // }, 100);

    // 显示菜单位置
    let el = document.getElementById('menu')
    el.style.display = 'block'
    el.style.top = params.event.event.offsetY - 120 + 'px'
    el.style.left = params.event.event.offsetX - 120 + 'px'
  })
  const zuojijiedian = async (params) => {
    // emit('leftClickOnNode', params.name)
    alert('asdf')
    testData.push({
      entity: '二级节点',
      entityImg: 'http://192.168.8.190/images/defaultCharacterImage1.png',
      feature: params.name,
      // featureImg: 'http://192.168.8.190/images/defaultCharacterImage1.png',
      featureImg:
        // props.detailsData.entityPhotoUrl || exp.pathUrl + '/images/defaultCharacterImage2.jpg',
        'http://192.168.8.190/images/defaultCharacterImage1.png',
      rela: '测试',
      sen: '1935年10月红一方面军到达陕北，11月中共中央在陕北成立中国工农红军西北革命军事委员会，下设政治保卫局，局长罗瑞卿。',
      idSen: 19,
      entityType: 'org',
      featureType: 'n',
      value: 1,
      posEntity: 1608,
      posFeature: 1624,
      posRela: 19
    })

    // relationshipGroupingFcn()
    // console.log(resultKeys)
    console.log(testData)
    // myChart.clear()
    // myChart.setOption(option)
    draw()
    await dealWithData()
    draw()
  }
  // 左击节点
  myChart.on('click', async function (params) {
    // myChart.clear()
    myChart.dispose()

    // alert('asdf')
    const asdf = testDataInitial
    asdf.push({
      entity: '二级节点',
      entityImg: 'http://192.168.8.190/images/defaultCharacterImage1.png',
      feature: params.name,
      // featureImg: 'http://192.168.8.190/images/defaultCharacterImage1.png',
      featureImg:
        // props.detailsData.entityPhotoUrl || exp.pathUrl + '/images/defaultCharacterImage2.jpg',
        'http://192.168.8.190/images/defaultCharacterImage1.png',
      rela: '测试',
      sen: '1935年10月红一方面军到达陕北，11月中共中央在陕北成立中国工农红军西北革命军事委员会，下设政治保卫局，局长罗瑞卿。',
      idSen: 19,
      entityType: 'org',
      featureType: 'n',
      value: 1,
      posEntity: 1608,
      posFeature: 1624,
      posRela: 19
    })
    testData = asdf
    // relationshipGroupingFcn()
    // console.log(resultKeys)
    console.log(testData)
    // myChart.setOption(option)
    // await dealWithData()
    await dealWithData()
    draw()
  })

  // 左击节点
  // myChart.on('click', function(params) {
  //     console.log(myChart.getOption())
  //     var data2 = [
  //         {
  //             name: params.data.name,
  //             children: [
  //                 {
  //                     name: '111',
  //                     value: 15,
  //                 },
  //                 {
  //                     name: '222',
  //                     value: 15,
  //                 },
  //                 {
  //                     name: '333',
  //                     value: 10,
  //                 }
  //             ]
  //         },
  //     ]

  //     if(params.componentSubType == 'graph'){
  //         // echarts.init(document.getElementById('canvas1')).setOption({
  //         //     backgroundColor: '#081b58',
  //         //     series: {
  //         //         type: 'sunburst',
  //         //         data: data2,
  //         //         radius: [0, '50%'],
  //         //         label: {
  //         //         rotate: 'radial'
  //         //         }
  //         //     }
  //         // })
  //         // let el = document.getElementById('canvas1')
  //         // el.style.display = 'block'
  //         // echarts.init(document.getElementById('canvas1')).on('click', function(params) {
  //         //     let el1 = document.getElementById('canvas1')
  //         //     el1.style.display = 'none'
  //         //     datas.push({
  //         //         name: '图书分析a',
  //         //         symbolSize: 80,
  //         //         category: 2,
  //         //         itemStyle: {
  //         //             normal: {
  //         //                 borderColor: '#82dffe',
  //         //                 borderWidth: 4,
  //         //                 shadowBlur: 10,
  //         //                 shadowColor: '#04f2a7',
  //         //                 color: '#001c43'
  //         //             }
  //         //         }
  //         //     });
  //         //     //更新边的关系
  //         //     linkmes.push({
  //         //         source: '图书分析a',
  //         //         target: '话题分析',
  //         //         lineStyle: {
  //         //             color: '#5f8ee7',
  //         //             opacity: 1,
  //         //             width: 2,
  //         //         }
  //         //     });
  //         //     option.series[0].data = datas
  //         //     option.series[0].links = linkmes
  //         //     myChart.setOption(option)
  //         // })
  //     }else{
  //         datas.push({
  //             name: '图书分析a',
  //             symbolSize: 80,
  //             category: 2,
  //             itemStyle: {
  //                 normal: {
  //                     borderColor: '#82dffe',
  //                     borderWidth: 4,
  //                     shadowBlur: 10,
  //                     shadowColor: '#04f2a7',
  //                     color: '#001c43'
  //                 }
  //             }
  //         });
  //         //更新边的关系
  //         linkmes.push({
  //             source: '图书分析a',
  //             target: '话题分析',
  //             lineStyle: {
  //                 color: '#5f8ee7',
  //                 opacity: 1,
  //                 width: 2,
  //             }
  //         });
  //         option.series[0].data = datas
  //         option.series[0].links = linkmes
  //         myChart.setOption(option)
  //     }
  //     if (params.name != null) {
  //         //var mes=params.name.replace(/\d+/g,"")
  //         // let el = document.getElementById("menu")
  //         // el.style.display = 'block'
  //         // el.style.top = params.event.event.offsetY + 'px'
  //         // el.style.left = params.event.event.offsetX + 'px'

  //         console.log(params)

  //         if (params.name == "话题分析") {
  //             //更新节点
  //             datas.push({
  //                 name: '图书分析a',
  //                 symbolSize: 80,
  //                 category: 2,
  //                 itemStyle: {
  //                     normal: {
  //                         borderColor: '#82dffe',
  //                         borderWidth: 4,
  //                         shadowBlur: 10,
  //                         shadowColor: '#04f2a7',
  //                         color: '#001c43'
  //                     }
  //                 }
  //             });
  //             //更新边的关系
  //             linkmes.push({
  //                 source: '图书分析a',
  //                 target: '话题分析',
  //                 lineStyle: {
  //                     color: '#5f8ee7',
  //                     opacity: 1,
  //                     width: 2,
  //                 }
  //             });
  //             //重新画图
  //             myChart.setOption({
  //                 series: [{
  //                     data: datas,
  //                     links: linkmes,
  //                 }]
  //                 // series: option.series
  //             });

  //         }
  //     }
  // })

  // 左键点击任意位置
  // myChart.getZr().on('click', function (event) {
  //   console.log('左键点击任意位置')
  //   if (document.getElementById('menu')?.style.display == 'block') {
  //     // closeMenu()
  //   }
  //   if (!event.target) {
  //     // 点击在了空白处，做些什么。
  //   }
  // })
}

// 菜单圆心样式
let menuStyle = ref({})
// 选中节点名称
let selectItem = ref()
// 选中节点图片
let selectItemImg = ref()
// 选中节点图片样式
let selectItemImgStyle = ref()
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  background-color: #e5f1fd;

  .c-full-screen {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #5b9bd5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
  }

  #canvas {
    position: absolute;
  }

  .canvas-reduce {
    width: 100%;
    height: 100%;
  }

  .canvas-full-screen {
    width: 100vw;
    height: 100vh;
  }

  #canvas1 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
}

.c-right-bottom {
  background-color: #f7fbfe;
  padding: 10px;
  position: absolute;
  right: 10px;
  bottom: 10px;

  .b-switch-box {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;

    .s-b-table {
      margin-left: 10px;
    }
  }
}
</style>
